<template>
  <div class="newList">
    <van-nav-bar title="文章详情" fixed placeholder  left-arrow @click-left="$router.back()" />
    <div class="article-wrap">
      <h3 class="title">{{ newList.title }}</h3>
      <div class="aut_info">
        <van-image
          fit="cover"
          :src="newList.aut_photo"
          round
        />
        <div class="info">
          <div>{{ newList.aut_name }}</div>
          <div class="time">{{ newList.pubdate | rlvTime }}</div>
        </div>
        <van-button type="info" round>+ 关注</van-button>
      </div>

      <!-- 文章内容 -->
      <div class="content" v-html="newList.content"></div>
      <!-- 分割线 -->
      <van-divider>end</van-divider>
      <!-- 功能按钮区域 -->
      <div class="btn-wrap">
        <van-button type="primary" plain round icon="good-job-o"
          >点赞</van-button
        >
        <div style="width: 30px"></div>
        <van-button type="danger" plain round icon="delete">不喜欢</van-button>
      </div>
    </div>
    <!-- 评论部分 -->
<comment />
     </div>
</template>

<script>
import { newsAPI } from "@/api";
import comment from "./comment.vue";
export default {
  components: { comment},

  data() {
    return {
      newList: [],
    };
  },
  async created() {
    let res = await newsAPI(this.$route.query.id);
    this.newList = res.data.data;
  },
};
</script>

<style lang="less" scoped>
.newList {
  // 文章部分
  .article-wrap {
    padding: 0 20px;
    .title {
      font-size: 24px;
      margin: 10px 0;
    }

    .aut_info {
      height: 80px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .info {
        margin-left: 20px;
        // 设置剩余空间里的占比，如果就只给它设置了
        // 就代表剩余部分全部给它
        flex: 1;

        .time {
          color: gray;
        }
      }
    }
    .content {
      word-wrap: break-word;
      overflow: hidden;
    }
    .btn-wrap {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
      .van-button {
        width: 120px;
      }
    }
  }
  ::v-deep pre {
    background-color: #000;
    color: #fff;
    overflow: auto;
    word-wrap: normal;
  }
  ::v-deep .van-image__img{
height: 50px !important;
width: 50px !important;
  }
}
</style>